<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Title</title>
    </head>

    <body>

        <%--需要联网--%>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

        <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

        <h4>文件列表</h4>

        <!--存放图片-->
        <div class="row" id="container">

        </div>

        <%--这里的</script>不能简化。--%>
        <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
        <%--AJAX请求；--%>
        <script type="text/javascript">
            $.get("book/list", function (res) {
                <%--console.log(res)--%>
                for (var i = 0; i <res.length; i++) {
                    <%--fn为文件名。--%>
                    var fn = res[i];
                    <%--如果是大屏幕lg每行显示12/2=6个；中等屏幕md每行显示4个；小屏幕sm每行3个；超小屏幕xs每行2个；--%>
                    var htmlStr = "<div class='col-lg-2 col-md-3 col-sm-4 col-xs-6'><div class='thumbnail'><img src='img/"+fn+"' alt='...'><div class='caption'><p><a href='book/download?fname="+fn+"' class='btn btn-primary' role='button'>下载</a></p></div></div></div>";
                    <%--把图片拼接进去。--%>
                    $("#container").append(htmlStr);
                }
            }, "json");
        </script>
    </body>
</html>
